<template>
	<div>
		<!-- 详情 -->
		<div class="tb-detail vf-detail">
			<div class="top-header">
			<!-- 返回按钮 -->
				<a class="header-left"></a>
				<article class="header-right">
					<section class="header-right_icon">
					</section>
				</article>
			</div>
			<div class="title" v-if="previewInfoFanl">{{previewInfoFanl.title}}</div>
			<div class="detail-tools">
				<div class="detail-tools_left" v-if="previewInfoFanl">
					<img :src="previewInfoFanl.userAvatar"/>
				</div>
				<div class="detail-tools_center" v-if="previewInfoFanl">
					<h3>{{previewInfoFanl.userNickName}}</h3>
					<p>
						<span v-if="previewInfoFanl">{{time}}</span>
						<span></span>
					</p>
				</div>
				<div class="detail-tools_right">
					关注
				</div>
			</div>
			<div class="detail-content" v-if="previewInfoFanl">
				<div class="ql-editor preview-content" v-html="previewInfoFanl.content"></div>
			</div>
		</div>
	</div>
</template>

<script>
  import {mapState, mapActions} from 'vuex';
  import util from '@/lib/util';
  export default {
    name: 'tb',
    data() {
			return {
        view_id: '',
        previewInfoFanl: {},
        time: null
			}
    },
    computed: {
      ...mapState([
        'articleDetail' //当前文章对象
      ]),
    },
    methods: {
      getPreviewDetail() {
        let param = {
          id: this.view_id
        }
        util.ajax.post(`/article/preview/detail`,{...param}).then((res) => {
          // 获取预览观点详情
          this.previewInfoFanl = res.data;
          this.time = util.formatTime(this.previewInfoFanl.createTime)
        });
      }
    },
    created() {
      // 获取观点详情, 获取参数, 要么地址栏传参,要么vuex里的articleId
      this.view_id = this.$route.query.id || this.articleDetail.articleId;
      if (this.view_id) {

        this.getPreviewDetail();
      }
    }
 }
</script>

<style scoped lang="scss">
  @import "@/assets/css/style.scss";

	.tb-detail {

    width: 92%;
    margin: 0 auto;
    .title {
    	padding-top: 62px;
        margin: 0px 0px 20px;
        font-size: 24px;
        color: #222222;
        letter-spacing: 0;
        line-height: 33px;
    }
    .detail-tools {
        margin-bottom: 18px;
        @include flexbox;
        @include justify-content(space-between);
        &_left{
            width: 37px;
            height: 37px;
            img{
                margin-right: 9px;
                width: 100%;
                height: 100%;
                vertical-align: top;
            }
        }
        &_center{
        	padding-left: 10px;
            h3{
                font-size: 14px;
                color: #222222;
                line-height: 18px;
            }
            p{
               font-size: 12px;
                color: #999999;
                line-height: 18px;
                span{
                    &:first-child{
                        margin-right: 10px;
                    }
                    &:last-child{
                        width: 40%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space:nowrap;
                        float: right;
                    }
                }
            }
        }
        &_right{
            width: 58px;
            height: 28px;
            text-align: center;
            line-height: 28px;
            color: #fff;
            font-size: 14px;
            background: #E6645F;
            border-radius: 4px;
        }
    }
    .detail-content {
    	 width: 100%;
        padding-bottom: 60px;
        p {
            margin-bottom: 18px;
            font-size: 18px;
            color: #222222;
            letter-spacing: 0;
            line-height: 27px;
        }
        .img-box {
            width: 100%;
            height: 212px;
            line-height: 212px;
            text-align: center;
            img {
                max-width: 100%;
                height: auto !important;
                object-fit: cover;
            }
        }
    }
}
</style>
